class Drop {
    public x;
    public y;
    public vy;
    public l;
    public r;
    public vr;
    public a;
    public va;
    public ctx;
    public w;
    public h;
    constructor(ctx: CanvasRenderingContext2D, w: number, h: number) {
        this.ctx = ctx;
        this.w = w;
        this.h = h;
        this.x = 0;
        this.y = 0;
        this.vy = 0;
        this.l = 0;
        this.r = 1;
        this.vr = 1;
        this.a = 1;
        this.va = 0.96;
        this.init();
    }
    init() {
        const w = this.w;
        const h = this.h;
        this.x = this.random(0, w);
        this.y = 0;
        this.vy = this.random(4, 5);
        this.l = this.random(0.8 * h, 0.9 * h);
        this.r = 1;
        this.vr = 1;
        this.a = 1;
        this.va = 0.96;
        this.draw();
    }

    draw() {
        //绘制图形
        if (this.y > this.l) {
            //雨滴下落到了指定位置 开始绘制圆形
            this.ctx.beginPath(); //先开始路径
            this.ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
            this.ctx.strokeStyle = 'rgba(0,255,255,' + this.a + ')';
            this.ctx.stroke();
        } else {
            //绘制下落的雨滴
            this.ctx.fillStyle = 'rgb(0,255,255)';
            this.ctx.fillRect(this.x, this.y, 2, 10);
        }

        this.update();
    }

    update() {
        //更新坐标位置
        if (this.y < this.l) {
            this.y += this.vy;
        } else {
            //雨滴下落到了指定位置 开始绘制波纹
            if (this.a > 0.03) {
                this.r += this.vr;
                if (this.r > 50) {
                    this.a *= this.va;
                }
            } else {
                //重新初始化
                this.init();
            }
        }
    }

    random(min: number, max: number) {
        return Math.random() * (max - min) + min; //min - max之间的随机数
    }
}

export default Drop;
